import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaRightMenu, WeaDialog, WeaFormItem, WeaInput, WeaSearchGroup, WeaSelect, WeaInputNumber } from "ecCom";
import { Button } from "antd";

/**
 * 考核设置-分数段设置-新增或编辑
 * jiansong 2019/6/18
 */
@inject("scoreSettingStore")
@observer
export default class ScoreSettingOperation extends React.Component {

    constructor(props) {
        super(props);
        this.store = this.props.scoreSettingStore;
    }

    render() {
        let { closeForm, showUpdataDialog, operation, loading } = this.store;
        const menu = [{
            key: 'save',
            icon: <i className='icon-coms-search' />,
            content: '保存',
            onClick: operation,
        }, {
            key: 'close',
            icon: <i className='icon-coms-search' />,
            content: '关闭',
            onClick: closeForm,
        }]
        let buttons = [
            <Button type="primary" loading={loading} onClick={operation}>确定</Button>,
            <Button type="ghost" onClick={closeForm}>取消</Button>
        ];
        return (
            <WeaDialog
                style={{ width: 840, height: 400 }}
                buttons={buttons}
                hasScroll
                title={"考核分数段"}
                visible={showUpdataDialog}
                onCancel={closeForm}
            >
                <WeaRightMenu datas={menu}>
                    <WeaSearchGroup title="基础字段" items={this.getFormItem()} showGroup={true} col={1} />
                </WeaRightMenu>
            </WeaDialog>
        )
    }

    getFormItem() {
        let { form, onFormChange, symbolOption } = this.store;
        let items = [{
            com:
                <WeaFormItem label="分段名称" labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                    <WeaInput
                        value={form.gardename}
                        viewAttr={3}
                        onChange={(val) => onFormChange({ "gardename": val })}
                    />
                </WeaFormItem>
        }, {
            com:
                <WeaFormItem label="开始值符号" labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                    <WeaSelect
                        options={symbolOption}
                        value={form.beginSymbol}
                        onChange={(val) => onFormChange({ "beginSymbol": val })}
                    />
                </WeaFormItem>
        }, {
            com:
                <WeaFormItem label="开始值" labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                    <WeaInputNumber
                        value={form.beginscore}
                        viewAttr={3}
                        precision={2}
                        onChange={(val) => onFormChange({ "beginscore": val })}
                    />
                </WeaFormItem>
        }, {
            com:
                <WeaFormItem label="结束值符号" labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                    <WeaSelect
                        options={symbolOption}
                        value={form.endSymbol}
                        onChange={(val) => onFormChange({ "endSymbol": val })}
                    />
                </WeaFormItem>
        }, {
            com:
                <WeaFormItem label="结束值" labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                    <WeaInputNumber
                        value={form.endscore}
                        viewAttr={3}
                        precision={2}
                        onChange={(val) => onFormChange({ "endscore": val })}
                    />
                </WeaFormItem>
        }, {
            com:
                <WeaFormItem label="显示顺序" labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                    <WeaInputNumber
                        value={form.rank}
                        onChange={(val) => onFormChange({ "rank": val })}
                    />
                </WeaFormItem>
        }];
        return items
    }
}